<template>
  <div class="app-container">
    <div class="tag-group" style="padding-bottom:20px;">
      <span class="tag-group__title">收藏夹列表: </span>
      <el-tag
        :key="tag"
        v-for="tag in favoriteList"
        closable
        :disable-transitions="false"
        @click="onSelectFavorite(tag)"
        @close="handleFavoriteClose(tag)">
        {{tag}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
        >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加收藏夹</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="dialogFormVisible = true"> 下单出库 </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-refresh" @click="handleUpdateCount"> 更新收藏数量 </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="名称" width="210" align="center">
        <template slot-scope="scope">
            {{ scope.row.name }}
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column label="价格" width="210" align="center">
        <template slot-scope="scope">
            {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="库存" width="210" align="center">
        <template slot-scope="scope">
            {{ scope.row.stock }}
        </template>
      </el-table-column>
      <el-table-column label="收藏数量" width="210" align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.count" size="small" :step="1" step-strictly></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handleClickFavoriteItemDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="下单信息填写" :visible.sync="dialogFormVisible">
      <el-form :model="orderForm">
        <el-form-item label="备注信息" :label-width="formLabelWidth">
          <el-input v-model="orderForm.note" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="下单数量" :label-width="formLabelWidth">
          <el-input v-model="orderForm.count" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateOrder">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {
  electronicFavoriteAdd,
  electronicFavoriteDelete,
  electronicFavoriteList,
  electronicFavoriteItemList,
  electronicFavoriteItemDelete,
  electronicFavoriteItemUpdate
} from '@/api/electronic'
import { electronicOutOrderCreate } from '@/api/electronic'
import waves from '@/directive/waves' // waves directive

export default {
  name: 'find',
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      listLoading: false,
      list: [],
      favoriteList: [],
      selectFavoriteTag: '',
      inputVisible: false,
      inputValue: '',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      orderForm: {
        note:'',
        count:1
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      electronicFavoriteList().then(response => {
        this.favoriteList = response.data.items
      })
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        electronicFavoriteAdd(inputValue).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.favoriteList.push(inputValue);
        })
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    onSelectFavorite(tag) {
      var name = tag
      this.selectFavoriteTag = tag
      this.listLoading = true
      electronicFavoriteItemList(name).then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    handleFavoriteClose(tag) {
      this.$confirm('此操作将删除收藏夹和收藏夹下收藏的元器件，是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          electronicFavoriteDelete(tag).then(response => {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.favoriteList.splice(this.favoriteList.indexOf(tag), 1);
          })
        })
    },
    handleClickFavoriteItemDelete(row){
      var name = this.selectFavoriteTag
      var sn = row.sn
      this.$confirm('删除元器件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        electronicFavoriteItemDelete(name, sn).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.onSelectFavorite(this.selectFavoriteTag)
        })
      })
    },
    handleCreateOrder(){
      if (this.list.length < 1) {
        this.$message({
          type: 'success',
          message: '请选择有元器件的收藏夹~'
        })
        return
      }
      if (this.orderForm.note === '') {
        this.$message({
          type: 'success',
          message: '请填写备注信息~'
        })
        return
      }
      var reg=/^[1-9]\d*(\.\d+)?$/;
      if (!reg.test(this.orderForm.count)) {
        this.$message({
          type: 'success',
          message: '数量填写错误,数量需大于0的正整数~'
        })
        return
      }
      this.dialogFormVisible = false
      var list = JSON.parse(JSON.stringify(this.list))
      for (var i = 0; i <list.length; i++ ) {
        var out_count = list[i].count * this.orderForm.count
        list[i].count = list[i].count * this.orderForm.count
        if (list[i].stock < list[i].count){
          this.$message({
            type: 'success',
            message: '['+list[i].name+']'+'库存不足~, 库存数：' + list[i].stock + ',你需要出库：'+list[i].count
          })
          return
        }
      }
      electronicOutOrderCreate(JSON.stringify(list), this.orderForm.note).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.onSelectFavorite(this.selectFavoriteTag)
      })
    },
    handleUpdateCount(){
      console.log(this.list)
      if (this.list.length < 1) {
        this.$message({
          type: 'success',
          message: '请选择有元器件的收藏夹~'
        })
        return
      }
      electronicFavoriteItemUpdate(JSON.stringify(this.list)).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
        this.onSelectFavorite(this.selectFavoriteTag)
      })
    }
  }
}
</script>


<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

